<template>
  <div>
    <!--        {{subject_id}}{{subject_name}}-->
    <!--        {{recentVideoList}}-->
    <div v-if="recentVideoList && recentVideoList.rows && recentVideoList.rows.length">
      <div style="display: flex;border-bottom: 1px solid gray;padding: 10px 0px" v-for="item in recentVideoList.rows">
        <img width="160" style="height: 97px" :src="item.bannerPic" alt="">
        <div style="display: flex;justify-content:space-between;width: 100%;margin-left: 10px">
          <div style="display: flex;flex-direction: column;justify-content: space-between">
            <p style="font-weight: bold;font-size: 16px;">名称：{{ item.title }}</p>
            <p style="font-size: 12px;color: rgb(141, 130, 130)">讲师：{{item.admin.name}}</p>
            <p style="font-size: 12px;color: rgb(141, 130, 130)">预约人数：{{item.basicReserveNum}}</p>
            <p style="font-size: 14px">视频时长：{{ proxy.$filters.timeFormat(item.duration) }}</p>
          </div>
          <div style="display: flex;flex-direction: column;justify-content: flex-end">
            <el-button style="text-align: right" @click="continueStudy(item)">继续学习</el-button>
          </div>
        </div>
      </div>
    </div>
    <el-empty v-else description="暂无回放" />
    <div v-if="recentVideoList.pagination">
      <el-pagination
          background
          v-model:currentPage="currentPage"
          :page-size="pageSize"
          layout="total, prev, pager, next"
          :total="recentVideoList.pagination.count"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import {reactive, toRefs, watchEffect, getCurrentInstance,onBeforeUnmount} from 'vue'
import {useRouter} from "vue-router";
import {liveReserve, videoTimer} from "@/api/api";

export default {
  name: "livePlayback",
  props: {
    state: {
      type: String
    },
    subject_id: {
      type: String
    }
  },
  setup(props) {
    const {proxy} = getCurrentInstance()

    let router = useRouter();

    let data = reactive({
      recentVideoList: [],
      pageSize: 10,
      currentPage: 1,
    })

    let getRecentVideoList = () => {
      liveReserve({
        state: props.state,
        courseID: localStorage.getItem('activeCourse'),
        page: data.currentPage,
        pageSize: data.pageSize
      }).then(res => {
        console.log('最近在学视频列表', res)
        data.recentVideoList = res.data;
      })
    }
    getRecentVideoList()

    const handleSizeChange = (val) => {
      console.log(`${val} items per page`)
      data.pageSize = val;
      getRecentVideoList();
    }
    const handleCurrentChange = (val) => {
      console.log(`current page: ${val}`)
      data.currentPage = val;
      getRecentVideoList();
    }

    let continueStudy = (item) => {
      console.log(item)
      router.push({name: 'liveStreaming', params: {id: item.id, state: 2}})
    }

    watchEffect(() => {
      let activeCourse = props.subject_id;
      console.log(activeCourse);
      getRecentVideoList()
    })



    return {
      proxy,
      handleSizeChange,
      handleCurrentChange,
      ...toRefs(data),
      continueStudy
    }
  }
}
</script>

<style scoped>

</style>
